<script>
import { reactive, ref } from "vue";
import Taro from "@tarojs/taro";
import { getDicMap } from "@/utils/storage";
import TzVue, { useReachBottom } from "@/lib/TzVue";
import { getList, saveSubMessage, unbind } from "../api";
export default new TzVue({
  name: "UnbindHome",
  components: {},
  setup() {
    const dicMap = getDicMap();
    const state = reactive({
      orderNumber: "",
      listData: [],
      queryParam: { currentPage: 1, status: "500,511" },
      pageCount: 0, //总页数(每次查询完的时候会修改该值)
    });
    const searchVal = ref("");
    //默认查询车辆
    const initList = () => {
      Taro.showLoading();
      const param = { ...state.queryParam, docCode: searchVal.value };
      getList(param)
        .then((res) => {
          Taro.hideLoading();
          if (state.queryParam.currentPage <= 1) {
            state.listData = res.data?.recordList;
          } else {
            state.listData.push(...res.data?.recordList);
          }
          state.pageCount = res.data.pageCount;
        })
        .catch(() => {
          Taro.hideLoading();
        });
    };
    initList();
    const handleSearch = () => {
      state.queryParam.currentPage = 1;
      initList();
    };
    //清空
    const handleClear = () => {
      state.queryParam.currentPage = 1;
      initList();
    };

    const templateIdList = ["Yqed7miyggZBTRHjB4Cl52t-JFl18H3KborNoVxlNMg"];
    //解绑
    const handleUnbind = (consistId) => {
      // 发起订阅消息的授权
      Taro.requestSubscribeMessage({
        tmplIds: templateIdList,
        success: function (res) {
          // 保存订阅消息授权的选择结果
          saveSubMessage(JSON.stringify(res)).then(() => {});
        },
      });
      Taro.showModal({
        title: "",
        content: "确定解绑该条记录吗？",
        success: function (res) {
          if (res.confirm) {
            unbind(consistId)
              .then(() => {
                initList();
              })
              .catch((error) => {
                if (error.code === "-1000") {
                  //校验失败
                  Taro.showToast({
                    title: res.data[0].message,
                    icon: "none",
                    duration: 2000,
                  });
                  return;
                }
                Taro.showToast({
                  title: error.msg || error.data.msg,
                  icon: "none",
                  duration: 2000,
                });
              });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    };
    //滚动底部
    useReachBottom(() => {
      const { activedTabName } = state;
      if (activedTabName !== "other") {
        if (state.pageCount <= state.queryParam.currentPage) {
          // 已加载全部数据
          Taro.showToast({
            title: "已经到底了",
            icon: "none",
            duration: 1000,
          });
          return;
        }
        state.queryParam.currentPage++;
        initList();
      }
    });
    return () => {
      return (
        <tz-view class="unbind-home">
          <tz-cell class="search-box" border>
            <tz-search
              prefix-icon="search"
              v-model={searchVal.value}
              placeholder="请输六联单号"
              clearable
              round
              showAction
              type="number"
              onClear={handleClear}
              onSearch={handleSearch}
            ></tz-search>
          </tz-cell>
          {state.listData.map((item, index) => {
            return (
              <tz-view class="list-row" key={index}>
                <tz-view class="list-row-item-l">
                  <tz-view class="list-row-item-title">{item.docCode}</tz-view>
                  <tz-cell class="list-row-item-cont">
                    <text class="item-label">司机名称</text>
                    <text>{item.driverName}</text>
                  </tz-cell>
                  <tz-cell class="list-row-item-cont">
                    <text class="item-label">单据类型</text>
                    <text>{dicMap.inOutTypeDic[item.inOutType]}</text>
                  </tz-cell>
                  <tz-cell class="list-row-item-cont">
                    <text class="item-label">口岸代码</text>
                    <text>{item.customsCode}</text>
                  </tz-cell>
                  <tz-cell class="list-row-item-cont">
                    <text class="item-label">录单时间</text>
                    <text>{item.createTime}</text>
                  </tz-cell>
                </tz-view>
                <tz-view class="list-row-item-r">
                  <tz-view class="item-label">
                    {dicMap.statusDic[item.consistStatus]}
                  </tz-view>

                  <tz-button
                    type="danger"
                    round
                    class="btn-box"
                    onClick={() => handleUnbind(item.consistId)}
                  >
                    解绑
                  </tz-button>
                </tz-view>
              </tz-view>
            );
          })}
        </tz-view>
      );
    };
  },
});
</script>

<style lang="scss">
.unbind-home {
  .search-box {
    width: 100%;
    padding: 4px 0;
    background-color: $white;
  }
  .list-row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: $white;
    @extend %bb1;

    .list-row-item-l {
      flex: 1;
      font-size: $font-size-3;
      .list-row-item-title {
        font-size: 15px;
        padding-bottom: 10px;
        color: $primary-color;
      }
      .list-row-item-cont {
        line-height: 22px;
        font-size: 13px;
        .item-label {
          padding-right: 10px;
          color: $text-color;
        }
      }
    }
    .list-row-item-r {
      width: 75px;
      height: 115px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      align-self: flex-end;

      .item-label {
        font-size: $font-size-4;
        color: $success-color;
      }
      .btn-box {
        width: 60px;
        height: 24px;
        font-size: 14px;
        justify-self: flex-end;
        margin-bottom: 3px;
      }
    }
  }
}
</style>
